<template>
    <div>
        <div class="title">可疑交易报告台账</div>
        <vxe-table ref="topTableRef" :data="list" border style="width: 100%">
            <vxe-table-column title="序号" width="80">
                <template #default="{ row, rowIndex }">
                    {{ rowIndex + 1 }}
                </template>
            </vxe-table-column>
            <vxe-table-column title="信息类型">
                <template #default="{ row, rowIndex }">
                    <bfe-select v-if="type !== 'view'" v-model="list[rowIndex].infTp" size="small"
                        @change="(val) => handleSelectChange(val, rowIndex)" :placeholder="$t('tooltip.please-select')">
                        <bfe-option v-for="item in selectObj['STM_MON_RPT_MSG_TYPE'][language]" :key="item.value"
                            :label="item.label" :value="item.value">
                        </bfe-option>
                    </bfe-select>
                    <div v-else>{{ getLabelByValue(list[rowIndex].infTp) }}</div>
                </template>
            </vxe-table-column>
            <vxe-table-column title="内容">
                <template #default="{ row, rowIndex }">
                    <bfe-input v-if="type !== 'view'" v-model="list[rowIndex].cntnt" size="small" type="textarea"
                        :maxlength="10000" :rows="2"
                        placeholder="填写来自监管/同业/媒体等外部渠道的可疑情报信息、可疑交易反映出需关注的重点领域、公司本期采取的管理动作"></bfe-input>
                    <div v-else>{{ list[rowIndex].cntnt }}</div>
                </template>
            </vxe-table-column>
            <vxe-table-column title="操作" width="120" v-if="type !== 'view'">
                <template #default="{ row, rowIndex }">
                    <bfe-button type="text" @click="delList(rowIndex)" v-if="list && list.length !== 1">删除</bfe-button>
                    <bfe-button type="text" @click="addList" v-if="rowIndex === list.length - 1">新增</bfe-button>
                </template>
            </vxe-table-column>
        </vxe-table>
        <!-- <vxe-pager border :current-page="tablePage.pageNo" :page-size="tablePage.pageSize" :total="tablePage.total"
            :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
            @page-change="handlePageChange">
        </vxe-pager>-->
    </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
    props: {
        type: {
            type: String,
            default: ''
        },
        date: {
            type: String,
            default: ''
        },
        selectObj: {
            type: Object,
            default: () => { }
        },
        reqOrgNo: {
            type: String,
            default: null,
        }
    },
    data() {
        return {
            list: [],
            // 分页
            tablePage: {
                pageNo: 1,
                pageSize: 10,
                total: 0,
            },
        }
    },
    computed: {
        ...mapState({
            language: (state) => state.base.language,
            userInfo: (state) => state.base.userInfo,
        }),
    },
    created() {
        console.log(this.selectObj, 'aaaaaaa');

        // if (this.type !== "add") {
        //     this.initData()
        // } else {
        //     this.list = [{ infTp: '', cntnt: '' }];
        //     this.tablePage.total = 1
        // }
        this.initData()
    },
    methods: {
        // 初始化数据
        initData() {
            const params = {
                optCode: 'STM002GET1807',
                payload: {
                    rptOrgNo: this.reqOrgNo,
                    rptpd: this.date,
                },
                pageInfo: {
                    pageNo: this.tablePage.pageNo,
                    pageSize: this.tablePage.pageSize
                }
            }
            if (this.type === 'add') {
                params.payload.queryFrom = 'add'
            }
            this.$p2svr(this.$api['_01_TSTM02MONRPT1800'], 'RequestPoAuth', { ...params }).then(res => {
                // console.log(res.payload, '可疑交易详情打印');
                // 新增或者编辑如果详情没查到数据 新增空数据
                if (!res.payload || !Array.isArray(res.payload) || res.payload.length === 0) {
                    if (this.type !== 'view') {
                        this.list = [{ infTp: '', cntnt: '' }];
                        this.tablePage.total = 1
                    }
                } else {
                    this.list = res.payload
                    this.tablePage.total = res.pageInfo ? res.pageInfo.total : 0
                    this.tablePage.pageNo = res.pageInfo ? res.pageInfo.pageNo : 1
                    this.tablePage.pageSize = res.pageInfo ? res.pageInfo.pageSize : 10
                }
            })

        },
        getLabelByValue(value) {
            const options = this.selectObj['STM_MON_RPT_MSG_TYPE'][this.language];
            const found = options?.find(item => item.value === value);
            return found ? found.label : '--';
        },
        // 分页
        handlePageChange({ currentPage, pageSize }) {
            this.tablePage.pageNo = currentPage
            this.tablePage.pageSize = pageSize
            this.initData()
        },
        // 删除
        delList(index) {
            this.list.splice(index, 1)
            if (this.tablePage.total > 0) {
                this.tablePage.total = this.tablePage.total - 1
            }
        },
        // 新增
        addList() {
            if (this.list.length < 6) {
                this.list.push({ infTp: '', cntnt: '' })
                this.tablePage.total = this.tablePage.total + 1
            }

        },
        handleSelectChange(val, rowIndex) {
            const nowObj = this.list[rowIndex]
            this.$set(this.list, rowIndex, { ...nowObj, infTpDesc: this.getLabelByValue(val) });
        },
    }
}
</script>

<style lang="less" scoped>
.title {
    font-size: 18px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 600;
    margin: 10px 0;
}
</style>